<template>
  <div class="QuDaoEditLog-container">
    <!-- <h2>编辑日志</h2> -->
    <div class="EditLogTables-container">
      <h5 id="EditLogH5">{{this.currentUser.currentName}}{{this.todayDate}}工作日志</h5>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="进件客户" name="1" id="JinJian">
          <el-table  :data="DJtableData" style="width: 100%" v-loading="loading" >
            <el-table-column label="归属" width="200">
                <template slot-scope="scope">
                    <p >{{ scope.row.parentName2 }}{{scope.row.parentName3 | panKong}}{{scope.row.parentName4 | panKong}}</p>
                </template> 
            </el-table-column>
            <el-table-column prop="userName" label="顾问"  ></el-table-column>
            <el-table-column prop="customerName" label="客户" ></el-table-column>
            <el-table-column prop="entryBank" label="进件银行" ></el-table-column>
            <el-table-column prop="entryQuota" label="进件额度" ></el-table-column> 
            <el-table-column prop="loanAmount" label="放款额度" ></el-table-column>
            <el-table-column prop="state" label="进度" ></el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="拉征信客户" name="2" id="CiShangMen">
          <el-input v-model="formLabelAlign.customerName" placeholder="请输入客户姓名"></el-input>
          <el-input v-model="formLabelAlign.userName" placeholder="请输入顾问姓名"></el-input>
          <el-button style="background-color:#c73e3a;color:#fff" :disabled="disTBN" @click="checkCus" class="check">查询</el-button> 
          <el-table  :data="LaZhengXinData" style="width: 100%" v-loading="loading" @row-click="handleCurrentChange">
            <el-table-column prop="GuiShu" label="归属"  ></el-table-column>
            <el-table-column prop="userName" label="顾问"  ></el-table-column>
            <el-table-column prop="customerName" label="客户"  ></el-table-column>
            <el-table-column prop="state" label="进度"  >
                <template slot-scope="scope">
                    <el-select v-model="scope.row.state" placeholder="请选择进度">
                        <el-option label="请选择" value="" ></el-option>
                        <el-option label="征信不符" value="征信不符" ></el-option>
                        <el-option label="未签约" value="未签约"></el-option>
                        <el-option label="已签约" value="已签约"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注" >
              <template scope="scope">
                <el-input size="small" 
                  v-model="scope.row.remarks"
                  placeholder="请输入备注" >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template scope="scope">
                <el-button size="small" type="danger" @click="deleteShouDongRow(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>     
      <div class="btn" style="text-align: center;margin-top:17px">
        <el-button style="background-color:#c73e3a;color:#fff" :disabled="disTBN" @click="submit" >提交</el-button>
      </div>
      
    </div>
    
  </div>
</template>

<script>
// 导入时间戳
import moment from 'moment'
import qs from "qs";
export default {
  name: "QuDaoEditLog",
  // 数据
  data() {
    return {
      currentUser:{
        currentName:"",
        currentId:"",
        currentLevel:"",
        currentPhone:"",
        currentcity:""
      },
      num: 0,
      showNameInput: true,
      todayDate: "",//当天日期
      activeNames: ['1','2'],  //折叠窗展开页码
      showTimeKind:true,
      //未分割的完整版时间区间
      value1: "",
      loading:false,
      //时间区间隐藏状态
      isShow:false,
      //禁用按钮的状态值
      disTBN:false,
      myLogForm: {
        typeZH:"当日上门", //充值类型中文
        time:"", //按时间搜索
        type:"today", //值：today，tomorrow，todayFk 默认当日
      },
      //客户筛选区域数据
      formLabelAlign: {
        customerName: "", 	//客户姓名
        userName: "", 	//顾问姓名
        customerId : ""  //查询客户ID
      },
      //提交数据下标的数组
      indexList:[],
      //真正提交的表格
      trueTodayData:[],
      DJtableData: [],
      LaZhengXinData: [{
        id: 123,
        name: '测试',
        phone: '13888888888',
        userName: '销售王（仅在服务器连接失败时显示）',
      }],
    };
  },
  methods: {
    //获取两张表的数据  
    getTodayJinJian(){
      this.loading = true
      this.$axios
      .get(`/spider/channelLog/getBillAndCredit?assistantId=${this.currentUser.currentid}`)
      .then(res => {
        if (res.data.messageModel.code == 0) {
            this.DJtableData = res.data.dataModel;//注意！！！后端响应体的数据和两张的表的数据的顺序是相反的DJtableData
            this.LaZhengXinData = res.data.dataModels;
            this.loading = false;
        }else{
            this.$message.error(res.data.messageModel.messageText);
            this.loading = false;
        }
        })
      .catch(error => {
        console.log(error);
        this.loading = false
      });
    },
    handleCurrentChange(row, event, column,index) {
      // console.log(row, event, column,index)
    },
    handleEdit(index, row) {
      // console.log(index, row);
      if (this.indexList.indexOf(index) == -1) {
        this.indexList.push(index)
      }
    },
    handleDelete(index, row) {
      // console.log(index, row);
    },
    //将按钮禁用两秒
    disButton(){
      this.disTBN = true
      setTimeout(() => {
        this.disTBN = false
      }, 2000);
    },
    //删除客户
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //查询客户
    checkCus(){
        //   this.disButton();
      if (this.formLabelAlign.customerName == "") {
        this.$message.error("请填写客户姓名");
        return false;
      }
      if (this.formLabelAlign.userName == "") {
        this.$message.error("请填写顾问姓名");
        return false;
      }
      if (this.LaZhengXinData.length > 0) {
        for (let i = 0; i < this.LaZhengXinData.length; i++) {
          if (this.formLabelAlign.customerName == this.LaZhengXinData[i].customerName || this.formLabelAlign.customerName == this.LaZhengXinData[i].customerId) {
            this.$message.error("该客户已被添加为拉征信客户，请勿重复添加");
            return false;
          } 
        }
      }
      this.showNameInput = false;
      this.$axios
        .get(`/spider/channelLog/getDoor?customerName=${this.formLabelAlign.customerName}&userName=${this.formLabelAlign.userName}`)
        .then(res => {      
            // console.log(res);
          if (res.data.messageModel.code == 0) {
            if (res.data.dataModel.length == 0) {
              this.$message("根据您填写的搜索条件未找到对应的客户");
            }else{
              //查到客户时
              const addDataOne = {};
              addDataOne.GuiShu = res.data.dataModel[0].parentName2 + '-' +res.data.dataModel[0].parentName3 + '-' +res.data.dataModel[0].parentName4; //归属
              addDataOne.userName = res.data.dataModel[0].userName; //顾问
              addDataOne.customerName = res.data.dataModel[0].customerName; //客户
              addDataOne.state = res.data.dataModel[0].state; //进度
              addDataOne.remarks = res.data.dataModel[0].remarks; //备注
              addDataOne.customerId = res.data.dataModel[0].customerId; //客户ID
              addDataOne.userId = res.data.dataModel[0].userId; //顾问ID
              this.LaZhengXinData.push(addDataOne);
            }
          }else{
            this.$message.error(res.data.messageModel.messageText);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //提交
    submit(){
        // console.log(this.todayData);
        //判断是否存在客户姓名为空的情况
        if (this.LaZhengXinData.length != 0) {
          for (let i = 0; i < this.LaZhengXinData.length; i++) {
            if (this.LaZhengXinData[i].state == "" || this.LaZhengXinData[i].state == null) {
              this.$message.error("拉征信客户进度不能为空");
              return false;
            }
            if (this.LaZhengXinData[i].remarks == "" || this.LaZhengXinData[i].remarks == null) {
              this.$message.error("拉征信客户备注不能为空");
              return false;
            }
          }
        }else{
          this.$message.error("未检测到有需要上传的拉征信客户");
          return false;
        }
        //  清空表格中的GuiShu值
        for (let i = 0; i < this.LaZhengXinData.length; i++) {
          delete this.LaZhengXinData[i].GuiShu;
          delete this.LaZhengXinData[i].userName;
          delete this.LaZhengXinData[i].customerName;
        }

        //传当日上门
        this.$axios
        .post(`/spider/channelLog/getAddCredit?assistantId=${this.currentUser.currentid}`,JSON.stringify(this.LaZhengXinData), {headers:{'Content-type':'application/json;charset=UTF-8'}})
        .then(res => {      
          // console.log(res);
          if (res.data.messageModel.code == 0) {
            this.getTodayJinJian(); //刷新当前页面数据
          }else{
            this.$message.error(res.data.messageModel.messageText);
          }
        })
        .catch(error => {
          console.log(error);
        });
        
    },
    //删除次日上门客户弹窗
    open() {
      this.$confirm('此操作将删除该上门客户, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
      }).then(() => {
        this.$message({type: 'success',message: '删除成功!'});
      }).catch(() => {
        this.$message({type: 'info',message: '已取消删除'});          
      });
    },
    //删除手动添加的row
    deleteShouDongRow(index, row){
      //物理删除
      this.LaZhengXinData.splice(index, 1);
    },
    changeCreditReporting(event){
      console.log(event);
    },
    handleChange(val){
      // console.log(val);
    }
  },
  // 本地过滤器
  filters: {
    formatTime(value) {
      if (value == null || value == "") {
        return ""
      }
      // return moment(value).format("YYYY-MM-DD HH:mm:ss");
      return moment(value).format("YY-MM-DD");
    },
    panKong(val) {
      if (val == null || val == "null") {
        return ""
      }else{
        return val
      }
    },
    //判断星级状态
    levelKind(val) {
      if (val == "0" || val == 0) {
        return  "0星" 
      }else if(val == "1" || val == 1){
        return  "1星"
      }else if(val == "2" || val == 2){
        return  "2星"
      }else if(val == "3" || val == 3){
        return "2星+"
      }else if(val == "4" || val == 4){
        return  "3星"
      }else if(val == "5" || val == 5){
        return "4星"
      }else{
        return ""
      }
    },
  },
  created () {
    //当日日期
    this.myLogForm.time = moment(new Date()).format("YYYY-MM-DD");
    this.todayDate = moment(new Date()).format("YYYY" + "年" + "MM"+ "月" +"DD"+ "日");
    this.currentUser.currentName = window.sessionStorage.getItem("name")
    this.currentUser.currentid = window.sessionStorage.getItem("id")
    this.currentUser.currentLevel = window.sessionStorage.getItem("userLevel")
    this.currentUser.currentcity = window.sessionStorage.getItem("departmentName1")
    this.currentUser.currentPhone = window.sessionStorage.getItem("phone")
    this.getTodayJinJian();
  },
  activated () {
    this.getTodayJinJian();
  }
};
</script>

<style  lang='scss'>
.QuDaoEditLog-container {
  .EditLogTables-container{
    margin: 10px;
    //折叠图标
  .el-collapse-item__arrow {
      margin-left: 5px;
      font-weight: 900;
  }
  #EditLogH5 {
        margin: 10px 0;
  }
  .el-collapse-item__content{
    padding-bottom: 5px;
  }
  .el-collapse-item {
      th {
        background-color: #D7D7D7;
      }
      .el-collapse-item__header{
        // background-color:#a0c5e8;
        background-color:#a0c5e875;
        height: 30px;
        border-radius: 3px;
        margin-bottom: 5px;
      }
  }
    .el-input{
      display: inline-block;
      width: 180px;
      .el-input__inner {
        width: 160px;
        height: 30px;
      }
    }
    .check {
      padding: 7px 20px;
      margin-bottom: 10px;
    }
    p{
      color: #555;
      border-bottom: 1px solid #B7B7B7;
      font-weight: 500;
    }
    .ell.ziZhi {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      // line-height: .9;
      border: none;
    }
    .el-table{
        font-size: 12px;
        .cell {
        padding-left: 1px;
        padding-right: 1px;
        text-align: center;
        line-height: 18px;
        }
        td{
            padding: 0;
        }
        th {
          padding: 0;
        }
        .shuoMing{
            width: 100%;
            border: 0;
            // outline: none;
            margin: 0;
            padding: 0 10px;
        }
        .el-button--danger {
          padding: 6px 15px;
        }
        .el-textarea__inner {
          padding: 5px;
        }
    }
  }
    
}
</style>